<template>
	<view class="content">
		<NavBar />

		<view class="blank">

		</view>

		<view class="box mt-100">
			<view class="text-center fs-30 bold mt-40 mb-20">
				{{result.keyword}}
			</view>
			<view class="line"></view>
			<view class="text-center fs-16 mt-20">
				属于垃圾分类的
			</view>
		</view>


		<Card :source="cardSource[index]" :index="index" />


		<div class="buttons mt-20">
			<button class="search-btn" @click="takePhoto">
				<image src="/static/scan.png" mode=""></image>
			</button>
			<button class="take-photo" @click="reSearch">
				<image src="/static/search.png" mode=""></image>
				再次搜索
			</button>
		</div>

	</view>
</template>

<script>
	import StatusBar from '@/components/StatusBar.vue'
	import NavBar from '@/components/NavBar.vue'
	import Card from '@/components/Card.vue'
	export default {
		data() {
			return {
				src: "",
				cardSource: [{
						title: "干垃圾",
						desc: "即其它垃圾，指除可回收物、有害垃圾、湿垃圾以外的其它生活废弃物。",
						icon: "../static/gan.png"
					},
					{
						title: "有害垃圾",
						desc: "对人体健康或者自然环境造成直接或潜在危害的生活废弃物。",
						icon: "../static/youhai.png"
					},
					{
						title: "湿垃圾",
						desc: "易腐的生物质生活废弃物。（本类别中列举物品均包含食用前、后物态）",
						icon: "../static/shi.png"
					},
					{
						title: "可回收物",
						desc: "宜循环，可循环利用的生活废弃物。",
						icon: "../static/huishou.png"
					}
				]
			}
		},
		components: {
			StatusBar,
			NavBar,
			Card
		},
		computed: {
			index() {
				let classify = this.$store.state.result.classify
				let index = 0;
				switch (classify) {
					case "干垃圾":
						index = 0;
						break;
					case "有害垃圾":
						index = 1;
						break;
					case "湿垃圾":
						index = 2;
						break;
					case "可回收物":
						index = 3;
						break;
				}
				return index;
			},
			imgUrl() {
				return this.$store.state.img
			},
			result() {

				return this.$store.state.result;
			}
		},

		onLoad(option) {
			this.src = option.img
		},
		methods: {
			takePhoto() {
				uni.redirectTo({
					url: "/pages/index/index"
				})
			},
			reSearch() {
				uni.redirectTo({
					url: "/pages/search/search"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		padding-bottom: 200px;
	}

	.blank {
		height: 100rpx;
	}

	.box {
		width: 646rpx;
		background-color: #FFEDD3;
		margin: 0 auto;
		border: solid 5px black;
		height: 200px;
		border-radius: 20px;

		.line {
			width: 323px;
			height: 0;
			border-bottom: 3px solid black;
			margin: 0 auto;

		}

	}

	.result-img {
		width: 644rpx;
		height: 196*2rpx;
		border-radius: 40rpx;
		margin: 40rpx auto;
		overflow: hidden;
		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.302);

		image {
			width: 100%;
		}
	}
</style>